<template>
  <div class="app-container detailsPage">
    <el-tabs v-model="activeName">
      <el-tab-pane label="合同信息" name="0">
        <div class="section">
          <div class="title">主要信息</div>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="list-ditem">
                租金合同号：
                <div>{{ detailData.rentCode }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list-ditem">
                物管合同号：
                <div>{{ detailData.propertyCode }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list-ditem">
                合同编号：
                <div>{{ detailData.contarctName }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list-ditem">
                合同名称：
                <div>{{ detailData.contarctName }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="list-ditem">
                合同状态：
                <div>
                  <dict-tag :options="dict.type.contarct_status" :value="detailData.contarctStatus"/>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list-ditem">
                租赁期限：
                <div>{{ detailData.contractStartTime }} - {{ detailData.contractEndTime }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list-ditem">
                签订日期：
                <div>{{ detailData.signTime }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list-ditem">
                合同类型：
                <div>无</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="list-ditem">
                经办人：
                <div>{{ detailData.signBy }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list-ditem">
                合同版本：
                <div>无</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list-ditem">
                备注：
                <div>sfdsfdsf</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="section">
          <div class="title">乙方</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="list-ditem">
                客户名称：
                <div>{{ detailData.crmCustomer?detailData.crmCustomer.companyName:"" }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="list-ditem">
                所属行业：
                <div>{{ detailData.crmCustomer?detailData.crmCustomer.industryname:"" }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="list-ditem">
                租赁方：
                <div>{{ detailData.crmCustomer?detailData.crmCustomer.companyName:"" }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="list-ditem">
                公司邮箱：
                <div>无</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="list-ditem">
                纳税人识别号：
                <div>{{ detailData.crmCustomer?detailData.crmCustomer.socialCreditCode:"" }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="list-ditem">
                联系电话：
                <div>{{ detailData.crmCustomer?detailData.crmCustomer.mobile:"" }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="list-ditem">
                法定代表人：
                <div>{{ detailData.crmCustomer?detailData.crmCustomer.name:"" }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="list-ditem">
                渠道名称：
                <div>wu</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="section">
          <div class="title">租赁场地</div>
          <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="detailData.houseInfo"
            tooltip-effect="dark"
            style="width: 100%">
            <el-table-column
              label="房间名称">
              <template slot-scope="scope">{{ scope.row.roomnumber }}</template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="所属园区">
              <template slot-scope="scope">无</template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="所属楼宇">
              <template slot-scope="scope">{{ scope.row.houseFloor.houseBuilder.buildingName }}</template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="所属楼层">
              <template slot-scope="scope">{{ scope.row.houseFloor.floorNum }}</template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="收租面积（平方米）">
              <template slot-scope="scope">{{ scope.row.rentarea }}</template>
            </el-table-column>
          </el-table>
        </div>
        <div class="section">
          <div class="title">固定租金</div>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="list-ditem">
                租金总价：
                <div>{{ detailData.rentfee }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="list-ditem">
                管理费总价：
                <div>{{ detailData.propertyfee }}</div>
              </div>
            </el-col>
          </el-row>
          <div class="title">押金</div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="list-ditem">
                金额：
                <div>{{ detailData.bondfee }}元</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="账单信息" name="1">
        <div class="section">
          <div class="title">付款计划</div>

          <el-table
            ref="multipleTable"
            :data="detailData.houseContarctBills"
            tooltip-effect="dark"
            style="width: 100%">
            <el-table-column
              label="账单编号">
              <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
              label="账单备注">
              <template slot-scope="scope">{{ scope.row.contarctPlanbz }}</template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="付款截至日期">
              <template slot-scope="scope">{{ scope.row.endTime }}</template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="应付（元）">
              <template slot-scope="scope">{{ scope.row.fee }}</template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="已付（元）">
              <template slot-scope="scope">{{ scope.row.ysfee }}</template>
            </el-table-column>
          </el-table>

        </div>
      </el-tab-pane>
    </el-tabs>
    <el-button @click="cacel">返回</el-button>
  </div>
</template>
<style lang="scss">
  .app-main {
    background: #E7E7E7;
  }

  .app-container {
    margin: 15px;
    background: #fff;
    border-radius: 5px;
  }

  .detailsPage {
    .el-tabs__header {
      margin: 0;
    }

    .section {
      border-bottom: 1px solid #E8E8E8;
      padding: 0 80px;

      .title {
        color: #A5AAB7;
        font-size: 17px;
        margin: 20px 0;
        text-align:left;
      }

      .list-ditem {
        display: flex;
        align-items: center;
        font-size: 15px;
        color: #595959;
      }
    }
    .pagination-container{
      height:30px;
    }
    .el-button{
      display:block;
      margin:30px auto;
    }
  }
</style>
<script>
import { getContarctInfo } from "@/api/contarct/contarct";

  export default {
    name: "Contarct",
    dicts: ['sys_status', 'contarct_status', 'rent_month_type', 'unit_type'],
    data() {
      return {
        activeName: "0",
        tableData: [],
        queryParams:{},
        total:1,
        detailData: {
          rentCode:""
        },
        loading:false
      };
    },
    activated() {
      this.selectContractDetail()
    },
    methods: {
      getList(){

      },
      cacel(){
        this.$router.go(-1);
      },
      selectContractDetail(){
        if(this.conductionData.contractId !== undefined && this.conductionData.contractId != '' && this.conductionData.contractId !== 0){
          this.loading=true;
          getContarctInfo(this.conductionData.contractId)
            .then(response =>{
              this.detailData = response.data;
              this.loading=false;
            })
        }
        console.log(this.conductionData.contractId)
      }
    }
  };
</script>
